<template>
	<div class="swiper-container">
		<div class="swiper-wrapper">			
			<div class="swiper-slide" v-for="(v,i) in list" :key="v.indexClassId" :class="{'on':type==v.indexClassId}" @click="enter(v.indexClassId)">{{v.indexClassName}}</div>
		</div>
	</div>
</template>
<script>
export default {
	props:['type'],
	data(){
		return {
			list:[]
		}
	},
	activated() {
		this.init()
	},
	methods:{
		init(){
			var that = this
			that.$ajax.selectClassByClassTypeId({classTypeId:that.$route.query.id}).then(res=>{
				if(res.code==0){
					this.list = res.data.ClassList
					that.$emit('update:type',res.data.ClassList[0].indexClassId)
					that.$nextTick(function(){
						new this.swiper('.swiper-container', {
							slidesPerView: 5,
							spaceBetween: 0,
						});
					})
				}
			})
		},
		enter(id){
			this.$emit('cb')
			this.$emit('update:type',id)
		}
	}
}
</script>
<style scoped="scoped">
	.swiper-container {
      width: 100%;
      height: 100%;
    }
	.swiper-slide {
      text-align: center;
      font-size: 0.26rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  position: relative;
	  color: #666666;
    }
	.swiper-slide.on{
		font-size: 0.28rem;
		color: #333 !important;
	}
	.swiper-slide.on::before{
		content: '';
		display: block;
		width: 90%;
		height: 2px;
		position: absolute;
		left: 5%;
		bottom: 0;
		background: linear-gradient(left, #fd9d62, #fb4c53);
		background: -webkit-linear-gradient(left, #fd9d62, #fb4c53);
	}
</style>
